{% extends "base.html" %}

{% block headers %}
<script src='https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js'></script>
{% endblock %}

{% block content %}
  <center>
    <h1>Token Usage</h1>

    <canvas id="chart" width="600" height="400"></canvas>
    <script>


      var color = Chart.helpers.color;

      var ctx = document.getElementById("chart").getContext("2d");

      var myChart = new Chart(ctx, {
        type: 'line',
        data: {
          labels: {{ labels|safe }},
          datasets: {{ data|safe }}
        },
        options: {
          scales: {
            yAxes: [{
              ticks: {
                beginAtZero: true
              }
            }]
          }
        }
      })

    </script>
  </center>
{% endblock %}